<%@ include file="/Pages/Jsp/Common/header.jsp"%>
<script type="text/javascript" src="<%=request.getContextPath()%>/Pages/Js/report.js"></script>

<script type="text/javascript">
		dataset = <%=request.getAttribute("userList")%>;
		sortStatus = [ 1, 1, 1, 1, 1,1,1, 1, 1];
		pageSize = 10; 
		currentPage = 1;
        
		$(document).ready(function() {
			gotoPage(currentPage);
			$('#pageLinks').show();
		});

		function sortByIndex(index){
			// Change the current sort type for the column
			if(sortStatus[index] == 1){
				sortStatus[index] = -1;
			}else{
				sortStatus[index] = 1;
			}

			// Property name of each column in global variable dataset
			var property = ['userName', 'firstName', 'lastName', 'email', 'userCategory','roles', 'active', 'groups','phoneNo'];

			// Call the sort function, and the result return dataset
			dataset = sort(dataset, property[index], sortStatus[index]);

			// Display current page after sort
			gotoPage(currentPage);
		};
		
		function gotoPage(pageNum){
			// If the pageNum is valid, then continue...
			if (Math.ceil(dataset.length / pageSize) >= pageNum && pageNum > 0){
				// Clean all rows of table recruitmentTable 
				clearTableRow('userTable');

				// Compute fromRow using pageSize and pageNum
				var fromRow = pageSize * (pageNum - 1);

				// Compute toRow using pageSize and pageNum
				var toRow = pageSize * pageNum - 1;

				// If pageNum points to the last page, re-compute toRow to a valid value
				if(pageSize * pageNum > dataset.length){
					toRow = dataset.length - 1;
				}

				// Append rows from fromRow to toRow to table recruitmentTable
				for ( var i = fromRow; i <= toRow; i++) {
					var userTemplate = $('#userTemplate').html().replace(/%%/g, i);
					userTemplate = userTemplate.replace(/ID/g, dataset[i].id);
					$('#userTable').append("<tr>" + userTemplate + "</tr>");
					
					$('#userName' + i).text(dataset[i].userName);
					$('#firstName' + i).text(dataset[i].firstName);
					$('#lastName' + i).text(dataset[i].lastName);
					$('#email' + i).text(dataset[i].email);
					$('#userCategory' + i).text(dataset[i].userCategory ==0?"Trainee":"Employee ");
					$('#role' + i).text(dataset[i].roles);
					$('#active' + i).text(dataset[i].active ==0?"Yes":"No");
					$('#group' + i).text(dataset[i].groups); 
					$('#phoneNo' + i).text(dataset[i].phoneNo);
				}

				// Change current page number
				currentPage = pageNum;

				// Change element currentPage
				$('#currentPage').val(currentPage + '/' + Math.ceil(dataset.length / pageSize));
				gridColor();
			}
		}
		function showDetail(id){
			post_to_url('<%=request.getContextPath()%>/user/modifyUser/modifyUserFoward.do', {'userId' : id}, 'post');
		}

		function submitSearch() {
			currentPage = 1;
			dataset = null;	
			var role = new Array();
			var group = new Array();	
			for(var i = 0, n = 0; i < userListSearchForm.listRole.length; i++){
				if(userListSearchForm.listRole[i].checked==1){
					role[n] = userListSearchForm.listRole[i].value;
					n++;
				}
			} 
			for(var i = 0, n = 0; i < userListSearchForm.listGroup.length; i++){
				if(userListSearchForm.listGroup[i].checked==1){
					group[n] = userListSearchForm.listGroup[i].value;
					n = n + 1;
				}
			} 
			
			var category;
			for(i = 0; i < document.userListSearchForm.listCategory.length; i++){
				if (document.userListSearchForm.listCategory[i].checked){
					category = document.userListSearchForm.listCategory[i].value;
				}
			}
			
			var searchCond = {
				userName : $('#listUserName').val(),
				firstName : $('#listFirstName').val(),
				lastName : $('#listLastName').val(),
				email : $('#listEmail').val(),
				active : $('#listActive').val(),
				phoneNo : $('#listPhoneNo').val(),
				category : category,
				role : role,
				group : group
			};

			$.ajax( {
				url : '<%=request.getContextPath()%>/user/modifyUser/userListSearch.do',
				type : 'post',
				dataType : 'json',
				data : searchCond,
				success : function(json) {
					if (json.isSuccess == true) {
						dataset = json.data;
						if (dataset.length == 0) {
							clearTableRow('userTable');
							$('#pageLinks').hide();
						} else { 
							gotoPage(currentPage);
							$('#pageLinks').show();
						}
					}
				},
				error : function(json) {
					alert('Error!');
				}
			});
		}
	</script>


<form name="userListSearchForm" action="<%=request.getContextPath()%>/user/modifyUser/userListSearch.do" method="post">
	<table id="searchTable" align="left"  class="blueTable">     
	<tr>
	<td >User Name:</td> 
	<td ><input type="text" name="listUserName" id="listUserName"></td>
	<td >First Name:</td>
	<td ><input type="text" name="listFirstName" id="listFirstName"></td>
	</tr>
	<tr>
	<td>Last Name:</td>
	<td><input type="text" name="listLastName" id="listLastName"></td>
	<td>Email:</td>
	<td><input type="text" id="listEmail" name="listEmail" id=""></td>
	</tr>
	
	<tr>
	   <td>  
            Active:
       </td>     
      <td>
      			<select id="listActive" name="listActive"  class="span-4" >
              	<option value="2" id="noactive" selected="selected" >--Please Select--</option> 
              	<option value="0" id="isactive" >Yes</option>
                <option value="1" id="noactive">No</option>
            </select>   
       </td>
       <td>Phone No.:</td>
       <td><input type="text" name="listPhoneNo" id="listPhoneNo"></td>
	 
       
	</tr>
	<tr>
	 <td>
       User category:
       </td>
      <td><input id="listCategory" name="listCategory" type="radio" value="Trainee" checked="checked"/>Trainee
	      <input id="listCategory" name="listCategory" type="radio" value="Employee"/> Employee
       </td> 
	</tr>
	<tr>
	   <td>
	    
	     Role:
	   </td>
	     <td colspan="3">
	     <logic:iterate id="roleList" name="roleList" type="com.capgemini.fs.app.ekms.model.Role">
	     <input id="ckbrole" name="listRole" value="<%=roleList.getName()%>" type="checkbox"><%=roleList.getName()%>
        </logic:iterate>
	     
	   </td>
	   
	</tr>
	
	<tr>
    <td>Group:</td>
    <td colspan="3">
    
     <logic:iterate id="groupList" name="groupList1" type="com.capgemini.fs.app.ekms.model.Group">
           <input id="ckbgroup" name="listGroup" value="<%=groupList.getGroupName()%>" type="checkbox"><%=groupList.getGroupName()%>
     </logic:iterate> 
     
    </td>
   
	</tr>
	
	<tr>
	
    <td colspan="4">
    <input type="button" value="Search" onClick="submitSearch()"/>
    <input type="reset" value=" Reset "/>
    <input value=" Back" type="button" onclick="history.back()">
    </td>
    </tr>
    </table>
</form>
<br></br>
<hr class="space prepend">
<table id="userTable"  class="blueTable" align="left" >  
	<tr>
		
			
		<th ><a href="#" onClick="sortByIndex(0)" style="color: white">	User Name</a></th>	
		<th><a href="#" onClick="sortByIndex(1)" style="color: white">First Name</a></th>
		<th><a href="#" onClick="sortByIndex(2)" style="color: white">Last Name</a></th>
		<th><a href="#" onClick="sortByIndex(3)" style="color: white">Email</a></th>
		<th><a href="#" onClick="sortByIndex(4)" style="color: white">User Category</a></th>
		<th ><a href="#" onClick="sortByIndex(5)" style="color: white">Group</a></th>
		<th ><a href="#" onClick="sortByIndex(6)" style="color: white">Active</a></th>
		<th ><a href="#" onClick="sortByIndex(7)" style="color: white">Role</a></th>
		<th><a href="#" onClick="sortByIndex(8)" style="color: white">Phone Number</a></th>
		
	</tr>

	
</table>


<table style="display: none" class="blueTable"> 
	<tr id="userTemplate">
		<td>
			<a href="#" onclick="showDetail('ID')"><div id="userName%%">  
			</div></a>
		</td>
		<td>
			<div id="firstName%%">
			</div>
		</td>
		<td>
			<div id="lastName%%">
			</div>
		</td>
		<td>
			<div id="email%%">
			</div>
		</td>
		<td>
			<div id="userCategory%%">
			</div>
		</td>
		<td >
			<div id="role%%">
			</div>
		</td>
		<td>
			<div id="active%%">
			</div>
		</td>
		<td >
			<div id="group%%">
			</div>
		</td>
		<td>
			<div id="phoneNo%%">
			</div>
		</td>
		
	</tr>
</table>


<div align="center" id="pageLinks" style="display:none" >
	<a href="#" onClick="gotoPage(1)">
		First Page
	</a> 
	&nbsp;&nbsp; 
	<a href="#" onClick="gotoPage(currentPage - 1)"> 
		Previous Page
	</a> 
	&nbsp;&nbsp;
	<input readonly="readonly" class="span-2" id="currentPage" value=""/>
	&nbsp;&nbsp;
	<a href="#" onClick="gotoPage(currentPage - 0 + 1)"> 
		Next Page
	</a> 
	&nbsp;&nbsp;
	<a href="#" onClick="gotoPage(Math.ceil(dataset.length / pageSize))"> 
		Last Page
	</a> 
	&nbsp;&nbsp;
	<input class="span-1" id = "pageNum"/>
	<input type="button" value="Go" onClick="gotoPage($('#pageNum').val())"/>
</div>

<hr class="space prepend">
